<template>
  <div>
    <span v-if="!inputType">{{ text }}</span>
    <component
      v-else
      v-model:value="record![dataIndex]"
      :is="is"
      size="small"
      v-bind="{ ...column?.inputType }"
    ></component>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, type PropType, type Ref } from "vue";
import { ElInput, ElSelect, ElButton } from "element-plus";
import { Select, SelectOption, Input, DatePicker } from "ant-design-vue";

import type { Column, Component } from "./types";

const InputComponent: { [key in Component]: any } = {
  input: Input,
  select: Select,
  "date-picker": DatePicker,
};

export default defineComponent({
  components: { ElInput, Select, SelectOption, Input, DatePicker },
  props: {
    // inputType: String,
    column: Object as PropType<Column<unknown>>,
    text: [String, Number, Boolean, Object],
    record: Object,
    // isEdit: Object,
  },
  data() {
    return {};
  },

  computed: {
    inputType() {
      return this.column?.inputType?.is as Component;
    },
    dataIndex() {
      return this.column!.dataIndex as string;
    },
    options() {
      return this.column?.inputType?.options;
    },

    isOperating() {
      return this.dataIndex === "operation";
    },

    is() {
      return InputComponent[this.inputType];
    },
  },
});
</script>

<style scoped></style>
